<template>
  <el-form-item
    :label="eleItem.name"
    class="widget-view"
    :class="{ active: selectWidget.key === eleItem.key }"
    :required="eleItem.options.required"
    @click.native.stop="handleSelectWidget"
  >
    <template v-if="eleItem.type==='input'">
      <el-input
        v-model="eleItem.options.defaultValue"
        :style="{ width: eleItem.options.width }"
        :placeholder="eleItem.options.placeholder"
        :disabled="eleItem.options.disabled"
        :show-password="eleItem.options.password"
        :clearable="eleItem.options.clearable"
        :maxlength="eleItem.options.maxlength"
        show-word-limit
        :ref="eleItem.key"
        :id="eleItem.key"
      ></el-input>
    </template>
    <!-- 多行文本 -->
    <template v-if="eleItem.type === 'textarea'">
      <el-input
        type="textarea"
        :style="{ width: eleItem.options.width }"
        :rows="eleItem.options.rows"
        v-model="eleItem.options.defaultValue"
        :placeholder="eleItem.options.placeholder"
        :disabled="eleItem.options.disabled"
        :maxlength="eleItem.options.maxlength"
        show-word-limit
      >
      </el-input>
    </template>
    <!-- 单选 -->
    <template v-if="eleItem.type === 'radio'">
      <el-radio-group v-model="eleItem.options.defaultValue">
        <el-radio
          v-for="(item, index) in eleItem.options.valueData"
          :key="index"
          :label="item.label"
          :style="{ display: eleItem.options.inline }"
          :class="{ radioLineHeight: true }"
          :disabled="eleItem.options.disabled"
          :border="eleItem.options.border"
        >{{ item.value }}</el-radio>
      </el-radio-group>
    </template>
    <!-- 多选 -->
    <template v-if="eleItem.type === 'checkbox'">
      <el-checkbox-group
        v-model="eleItem.options.defaultValue"
        :max="eleItem.options.max"
      >
        <el-checkbox
          v-for="(item, index) in eleItem.options.valueData"
          :key="index"
          :label="item.value"
          :style="{ display: eleItem.options.inline }"
          :class="{ radioLineHeight: true }"
          :disabled="eleItem.options.disabled"
          :border="eleItem.options.border"
        >{{ item.value }}</el-checkbox>
      </el-checkbox-group>
    </template>
    <!-- 计数器 -->
    <template v-if="eleItem.type === 'inputNumber'">
      <el-input-number
        v-model="eleItem.options.defaultValue"
        :min="eleItem.options.min"
        :max="eleItem.options.max"
        :controls-position="eleItem.options.position"
        :disabled="eleItem.options.disabled"
      ></el-input-number>
    </template>
    <!-- 下拉框 -->
    <template v-if="eleItem.type === 'select'">
      <el-select
        v-model="eleItem.options.defaultValue"
        placeholder="请选择一个选项"
        :style="{ width: eleItem.options.width }"
        :multiple="eleItem.options.multiple"
        :clearable="eleItem.options.clearable"
        :disabled="eleItem.options.disabled"
      >
        <el-option
          v-for="item in eleItem.options.valueData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </template>
    <!-- 滑块 -->
    <template v-if="eleItem.type === 'slider'">
      <el-slider
        v-model="eleItem.options.defaultValue"
        :disabled="eleItem.options.disabled"
        :min="eleItem.options.min"
        :max="eleItem.options.max"
      ></el-slider>
    </template>
    <!-- 评分  -->
    <template v-if="eleItem.type === 'rate'">
      <el-rate
        v-model="eleItem.options.defaultValue"
        :max="eleItem.options.max"
        :disabled="eleItem.options.disabled"
        :show-text="eleItem.options.text"
        style="margin-top: 6px"
      ></el-rate>
    </template>
    <!-- 时间选择器 -->
    <template v-if="eleItem.type === 'timePicker'">
      <el-time-picker
        :style="{ width: eleItem.options.width }"
        v-model="eleItem.options.defaultValue"
        placeholder="选择时间"
        :disabled="eleItem.options.disabled"
        :clearable="eleItem.options.clearable"
        :default-value="new Date()"
        value-format="HH:mm:ss"
        format="HH:mm:ss"
      >
      </el-time-picker>
    </template>
    <!-- 日期选择器 -->
    <template v-if="eleItem.type === 'datePicker'">
      <el-date-picker
        v-model="eleItem.options.defaultValue"
        placeholder="选择日期"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :value-format="eleItem.options.valueFormat"
        :default-value="new Date()"
        :style="{ width: eleItem.options.width }"
        :type="eleItem.options.type"
        :disabled="eleItem.options.disabled"
        :clearable="eleItem.options.clearable"
      >
      </el-date-picker>
    </template>
    <!-- 文字 -->
    <template v-if="eleItem.type === 'text'">
      <div
        :class="{ 'form-text': listdata.config.labelPosition !== 'top' }"
        :style="{
          display: 'grid',
          'justify-content': eleItem.options.position,
          'font-size': eleItem.options.size + 'px',
          color: eleItem.options.color,
          'line-height': eleItem.options.lineHeight + 'px',
          'font-weight': eleItem.options.weight,
        }"
      >
        <div :style="{
            'padding-left': eleItem.options.leftPadding + 'px',
            'font-style': eleItem.options.style,
            'text-indent': eleItem.options.indent + 'em',
          }">
          {{ eleItem.options.defaultValue }}
        </div>
      </div>
    </template>
    <!-- 分割线 -->
    <template v-if="eleItem.type === 'divider'">
      <div :class="{ 'form-text': listdata.config.labelPosition !== 'top' }">
        <el-divider :content-position="eleItem.options.position">
          {{ eleItem.options.defaultValue }}
        </el-divider>
      </div>
    </template>
    <!-- 组件操作按钮 -->
    <div class="view-operations">
      <!-- 移动 -->
      <div>
        <el-tag
          effect="dark"
          class="movetag"
        >
          <i class="el-icon-rank"></i>
        </el-tag>
      </div>
      <!-- 删除 -->
      <div>
        <el-tag
          effect="dark"
          @click="removeWidgetElement()"
        >
          <i class="el-icon-delete"></i></el-tag>
      </div>
    </div>
  </el-form-item>
</template>

<script>
import draggable from "vuedraggable";
import Input from "@/components/WidgetForm/componentLib/Input";
export default {
  components: {
    draggable,
    Input,
  },
  props: {
    // 选中的元素
    select: {
      type: Object,
    },
    // 当前元素
    eleItem: {
      type: Object,
    },
    // 当前元素在渲染区的 index
    eleIndex: {
      type: Number,
    },
    // 渲染区表单 config data
    listdata: {
      type: Object,
    },
  },
  data() {
    return {
      selectWidget: this.select,
    };
  },
  watch: {
    select(n) {
      this.selectWidget = n;
    },
    selectWidget: {
      handler: function (n) {
        this.$emit("update:select", n);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      const dom = this.$refs[this.eleItem.key];
      dom.focus();
    });
  },
  methods: {
    // 点击不同的组件触发
    handleSelectWidget() {
      this.selectWidget = this.eleItem;
    },
    removeWidgetElement() {
      const index = this.eleIndex;
      // 设置选中的 组件
      if (this.listdata.list.length === index + 1) {
        if (index === 0) {
          this.selectWidget = {
            key: null,
            options: {
              placeholder: null,
            },
          };
        } else {
          this.selectWidget = this.listdata.list[index - 1];
        }
      } else {
        // 如果不是最后一个，选中的改为下一个
        this.selectWidget = this.listdata.list[index + 1];
      }
      this.$nextTick(() => {
        this.listdata.list.splice(index, 1);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.widget-view {
  margin-bottom: 0px !important;
  position: relative;
}
.active {
  border: 2px solid #409eff !important;
}
.radioLineHeight {
  line-height: 32px;
}
.view-operations {
  display: none;
}
.active .view-operations {
  position: absolute;
  bottom: -3px;
  right: -7px;
  display: flex;
  cursor: pointer;
  transform: scale(0.8);
  > div {
    margin-left: 3px;
  }
}
.form-text {
  margin-left: -100px;
}
</style>
